<template>
  <div class="top">


    <mt-tab-container v-model="selected2" >
      <mt-tab-container-item id="1">
        <div class="content-item" v-for="item in reads" v-model="selected">
          <div class="article-preview">
            <div class="avatars article-preview-avatar" :style="{ backgroundImage: 'url(' + item.imgUrl + ')' }"></div>
            <div class="article-preview-content">
              <div class="article-preview-title">{{ item.name }}阅读了{{ item.readCount }}次{{ item.readCount > 0 ? ",并且转发了文章" : "." }}</div>
              <div class="article-preview-info">
                <div class="article-preview-info-left">
                  <span class="article-preview-repost">{{ timestampToTime(item.createTime) }}</span>
                </div>
                <!-- <div class="article-preview-info-right">
                  <div class="">
                    <span class="taro-text theme-tag">#{{ item.type }}</span>
                  </div>
                </div> -->
              </div>
            </div>
            <div class="img-pre" @click="changeShow(item.articleId)"><div class="icon-up"></div></div>
            <mt-button type="default" size="small" class="check" v-if="item.isRedirect > 0" @click.native="handleClick(item.userId, item.articleId)">Ta转发了你的文章</mt-button>
          </div>
        </div>
        <mt-popup v-model="popupVisible" class="popups">
          <mt-navbar v-model="selected3" style="margin-bottom: 10px;">
            <mt-tab-item id="1">好友阅读记录</mt-tab-item>
            <mt-tab-item id="2">好友转发链</mt-tab-item>
          </mt-navbar>

          <mt-tab-container v-model="selected3" style="overflow: auto;">
            <mt-tab-container-item id="1">
              <div v-for="item in readP">
                <div class="article-preview">
                  <div class="avatars article-preview-avatar" :style="{ backgroundImage: 'url(' + item.imgUrl + ')' }"></div>
                  <div class="article-preview-content">
                    <div class="article-preview-title">{{ item.name }}阅读了{{ item.readTime >= 1 ? item.readTime : '不足一' }}分钟</div>
                    <div class="article-preview-info">
                      <div class="article-preview-info-left">
                        <span class="article-preview-repost">{{ timestampToTime(item.createTime) }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
              <TreeChart :json="treeData" />
            </mt-tab-container-item>
          </mt-tab-container>
        </mt-popup>
      </mt-tab-container-item>

    </mt-tab-container>

    <div class="wait" v-show="selected2 == '1'" v-infinite-scroll="loadMore1" infinite-scroll-disabled="busy1" infinite-scroll-distance="10">
      <mt-spinner v-if="!end1" type="snake" color="rgb(38, 162, 255)"></mt-spinner>
      <font v-if="end1">我是有底线的—————————————————</font>
    </div>

  </div>
</template>

<script>
import $ from 'jquery';
import TreeChart from "./TreeChart.vue"
import { Indicator } from 'mint-ui';
export default {
  name: 'recordDetail',
  data() {
    return {
      selected2: '1',
      reads: [],
      redirects: [],
      busy1: true,
      end1: false,
      page1: 1,
      openid: '',
      articleId: '',
      userId: '',
      selected: '',
      selected3: '1',
      popupVisible: false,
      readP: [],
      treeData: {
      }
    };
  },
  components: {
    TreeChart
  },
  created() {
    if (localStorage.getItem('openId') == null) {
      // 如果缓存localStorage中没有微信openId，则需用code去后台获取
      console.log('获取localStorage失败，准备获取code');
      this.getCode();
    } else {
      if (this.openid === '') {
        // this.openid = this.util.getLocalStorage('openid');
        this.openid = localStorage.getItem('openId');
      }
    }
    this.articleId = this.$route.query.articleId;
    this.userId = this.$route.query.userId;
    if (this.userId == null || this.userId == '') {
      this.userId = this.openid;
      // console.log('userId' + this.userId);
    }
    this.searchInfo(false, this.page1);
  },
  watch:{
    '$route'(to,from){
      console.log("$route")
      if(from.path == "/recordDetail"){
        console.log("change")
        location.reload()
        // this.articleId = this.$route.query.articleId;
        // this.userId = this.$route.query.userId;
        // if (this.userId == null || this.userId == '') {
        //   this.userId = this.openid;
        //   console.log('userId' + this.userId);
        // }
        // this.searchInfo(false, this.page1);
      }
    }
  },
  methods: {
    searchInfo(flag, page) {
      var that = this;
      if (this.selected2 == '1') {
        $.ajax({
          url: 'https://yokapp.mynatapp.cc/record/getRead',
          type: 'GET',
          async: false,
          data: { openid: that.openid, userId: that.userId, page: page, articleId: that.articleId },
          success: function(data) {
            if (flag) {
              that.page1++; // 增加页数
              for (let j = 0; j < data.length; j++) {
                that.reads.push(data[j]);
                // console.log(data[j]);
              }
              if (data != false && data.length>9) {
                //还有数据
                that.busy1 = false;
                console.log('还有数据，开启busy');
              } else {
                that.busy1 = true; // 将无限滚动关闭
                that.end1 = true;
                console.log('没有数据，关闭busy');
              }
            } else {
              if (data != false) {
                //还有数据
                that.reads = data;
                that.busy1 = false;
                that.page1++;
                console.log('还有数据，开启busy');
              } else {
                that.busy1 = true; // 将无限滚动关闭
                that.end1 = true;
                console.log('没有数据，关闭busy');
              }
            }
          },
          error: function(xhr, textStatus) {
            console.log('getInfo失败' + textStatus);
          }
        });
      }
    },
    handleClick(ownId, articleId) {
      this.$router.push({
        path: '/recordDetail',
        query: { userId: ownId, articleId: articleId }
      });

    },
    changeShow(){
      var that = this;
      $.ajax({
        url: 'https://yokapp.mynatapp.cc/record/getReads',
        type: 'GET',
        async: true,
        data: { openid: that.openid, userId: that.userId, articleId: that.articleId },
        success: function(data) {
          that.readP = data;
          that.popupVisible = true;
        },
        error: function(xhr, textStatus) {
          console.log('getInfo失败' + textStatus);
        }
      });
      $.ajax({
        url: 'https://yokapp.mynatapp.cc/record/getRecordList',
        type: 'GET',
        async: true,
        data: { openid: that.openid, userId: that.userId, articleId: that.articleId },
        success: function(data) {
          that.treeData = data;
        },
        error: function(xhr, textStatus) {
          console.log('getInfo失败' + textStatus);
        }
      });
    },
    loadMore1: function() {
      if(this.reads.length % 10 == 0){
        this.busy1 = true; // 将无限滚动给禁用
        setTimeout(() => {
          this.searchInfo(true, this.page1);
        }, 100);
      }else{
        this.busy1 = true;
        this.end1 = true;
      }
    },
    select: function() {

    },
    timestampToTime: function(time) {
      var date = new Date(time); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '年';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
      var D = date.getDate() + '日';
      var h = date.getHours();
      var m = date.getMinutes();
      if (parseInt(h) < 10) {
        h = '0' + h;
      }
      h = h + ':';
      if (parseInt(m) < 10) {
        m = '0' + m;
      }
      return Y + M + D + h + m;
    }
  }
};
</script>

<style scoped>
.popups{
  width: 350px;
  max-height: 700px;
  overflow-y: auto;
}
.check {
  width: 50px;
  font-size: 10px;
  height: 50px;
  margin-top: 15px;
  padding: 0 0;
}
.top {
  margin-bottom: 55px;
}
.content-item {
  position: relative;
  margin: 0 5px;
}
.img-pre {
   margin-right: 10px;
}

.icon-up {
  background-image: url(../../assets/pictures/查看.png);
  background-size: 100% 100%;
  width: 24px;
  height: 24px;
  margin-top: 20px;
}
.article-preview {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 5px 0;
  background: #fff;
  border-bottom: 1px solid hsla(0, 0%, 92.9%, 0.5);
}
.article-preview-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-right: 2px;
}
.article-preview-title {
  display: -webkit-box;
  height: 16px;
  /* overflow: hidden; */
  font-family: 'Arial', 'Microsoft YaHei', '黑体', '宋体', sans-serif;
  font-size: 16px;
  font-weight: 400;
  margin-top: 10px;
  line-height: 18px;
  /* line-height: 0.48rem; */
  color: #333;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.article-preview-info {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.article-preview-info-left {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
}

.article-preview-avatar {
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: contain;
  border-radius: 6px;
  width: 100px;
  height: 90px;
}

.avatars {
  height: 65px;
}

.article-preview-repost {
  font-family: PingFangSC-Regular, PingFang SC;
  font-size: 14px;
  font-weight: 400;
  color: #999;
}
</style>
